<template>
  <!-- 活跃项目卡片 1 -->
  <div
      class="space-card bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 h-64"
      :class="{
         'is-pro': spaceVo.spaceLevel === 2,
         'is-flagship': spaceVo.spaceLevel === 1
       }">
    <div class="h-36 relative"
         :class="isCommonSpace(spaceVo.spaceLevel)?'bg-emerald-50':getOtherSpaceColor(spaceVo.spaceLevel)">
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="grid grid-cols-2 gap-1">
          <img
              src="https://images.unsplash.com/photo-1523731407965-2430cd12f5e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
              class="w-full h-16 object-cover rounded-sm" alt="项目缩略图">
          <img
              src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
              class="w-full h-16 object-cover rounded-sm" alt="项目缩略图">
          <img
              src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
              class="w-full h-16 object-cover rounded-sm" alt="项目缩略图">
          <img
              src="https://images.unsplash.com/photo-1434626881859-194d67b2b86f?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
              class="w-full h-16 object-cover rounded-sm" alt="项目缩略图">
        </div>
      </div>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-900 hover:text-indigo-600" @click="toDetailSpacePage(spaceVo.id)">
        {{ spaceVo.spaceName }}</h3>
      <div class="mt-4 flex justify-between items-center">
        <div class="flex -space-x-2">
          <img  v-for="avatar in spaceVo.memberAvatars"
              class="h-7 w-7 rounded-full ring-2 ring-white"
               :src="avatar"
               alt="用户头像">
        </div>
        <span class="text-sm text-gray-500">{{ spaceVo.totalCount }}张图片</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {AbbreviationSpaceVo} from "@/api/space-service";
import {useRouter} from "vue-router";

defineProps({
  spaceVo: {
    type: Object as () => AbbreviationSpaceVo,
    required: true
  }
})
const router = useRouter()
const toDetailSpacePage = (spaceId?: Number) => {
  if (spaceId) {
    router.push({
      path: `/space/detail/${spaceId}`
    })
  }
}

const isCommonSpace = (spaceLevel: number) => {
  return spaceLevel == 0;
}

const getOtherSpaceColor = (spaceLevel:number)=>{
  if (spaceLevel==1){
    return 'bg-indigo-100'
  }else{
    return 'bg-amber-50'
  }

}
</script>

<style scoped>
.space-card {
  position: relative;
  overflow: hidden;
}

.space-card.is-pro::after {
  content: '专业版';
  position: absolute;
  top: 10px;
  right: -30px;
  transform: rotate(45deg);
  background-color: #4f46e5; /* indigo-600 */
  color: white;
  padding: 4px 30px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

.space-card.is-flagship::after {
  content: '旗舰版';
  position: absolute;
  top: 10px;
  right: -30px;
  transform: rotate(45deg);
  background-color: #f59e0b; /* amber-500 */
  color: white;
  padding: 4px 30px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}
</style>